<template>
    <div class="rank_header">
        <div class="title">
            <span>热销榜</span>
        </div>
    </div>
    <div class="rank_box">
        <div class="item" v-for="(item, index) in productList" :key="index" @click="goDetail(item)">
            <div class="top">
                <div class="img">
                    <img :src="item.thumb_text" />
                </div>
                <div class="content">
                    <div class="title">{{ item.name }}</div>
                    <p class="middle"><span>值得买</span>{{ item.description }}</p>
                    <p class="desc">"{{ item.comment || '暂无评价' }}"</p>
                </div>
            </div>
            <div class="footer">
                <div class="price">
                    ￥<span>{{ item.live_price || item.price }}</span>
                    券后价
                    <span>极速退款</span>
                </div>
                <div class="btn" @click.stop="goBuy(item)">
                    去购买>
                </div>
            </div>
            <div class="tip">
                <img src="/assets/images/hot.png" />
                <span>热销指数{{ item.sales_rate || '9.9' }}</span>
            </div>
        </div>
    </div>
  
    <Tabbar />
</template>
  
<script setup>
import { ref, onBeforeMount, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'

const { proxy } = getCurrentInstance()
const router = useRouter()

// 商品列表数据
const productList = ref([])

// 获取商品列表
const getProductList = async () => {
    let params = {
    }

    let result = await proxy.$http.post({
        url: '/product/rank',
        params
    })

    if(result.code === 1) {
        productList.value = result.data.product
    }
}

// 跳转详情页
const goDetail = (item) => {
    router.push({
        path: '/product/info',
        query: { proid: item.id }
    })
}

// 立即购买
const goBuy = (item) => {
    router.push({
        path: '/product/info',
        query: { 
            proid: item.id,
            buy:1
        }
    })
}

onBeforeMount(() => {
    getProductList()
})
</script>
  
<style scoped>
@import url('/assets/css/ProductRank.css');
</style>